<!--用户管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;float: left">企业信息</span>
  </div>
<!--   编辑公司弹窗 -->
    <el-dialog :title="dialogTitle" style="width:600px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
      <el-form label-width="50px" label-position="top">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司名称">
              <el-input placeholder="请输入公司名称" v-model="saveCompanyForm.corporateName" :disabled="saveCompanyForm.corporateName!=null"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司规模">
              <el-input placeholder="请输入公司规模" v-model="saveCompanyForm.companySize"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司级别">
              <el-input placeholder="请输入公司级别" v-model="saveCompanyForm.corporateLevel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司地址">
              <el-input placeholder="请输入公司地址" v-model="saveCompanyForm.companyAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="行业分类">
              <el-input placeholder="请输入行业分类" v-model="saveCompanyForm.industryClassification"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button  @click="handleClose()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
        <el-button type="primary" color="#5B63B7" @click="saveCompany()">保存</el-button>
      </template>
    </el-dialog>

  <!-- 新增招聘者弹窗 -->
  <el-dialog :title="dialogTitleHr" style="width:600px;padding:40px;" v-model="dialogVisibleHr" :before-close="handleCloseHr">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="公司名称">
            <el-input placeholder="请输入公司名称" v-model="saveHrForm.corporateName" :disabled="saveHrForm.corporateName!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*职位">
            <el-input placeholder="请输入职位" v-model="saveHrForm.position" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <!--          <p><span class="tips-must-do">*</span>身份</p>-->
          <el-form-item label="*身份">
            <el-select placeholder="请选择身份" v-model="saveHrForm.identityId" >
              <el-option v-for="item in levelOption" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input placeholder="请输入真实姓名" v-model="saveHrForm.realName" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*用户名">
            <el-input placeholder="请输入用户名" v-model="saveHrForm.username" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="saveHrForm.nickname" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveHrForm.email" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*手机号">
            <el-input placeholder="请输入手机号" v-model="saveHrForm.phone" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*微信号">
            <el-input placeholder="请输入微信号" v-model="saveHrForm.wechatId" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="saveHrForm.gender" :disabled="saveHrForm.identityId==10">
              <el-radio value="男" border style="margin: 0;">男</el-radio>
              <el-radio value="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleCloseHr()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" @click="saveHr(saveHrForm.companyId)">保存</el-button>
    </template>
  </el-dialog>

  <!-- 公司查询卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="公司名称" style="float: left">
        <el-input placeholder="输入公司名称" style="width:220px;"
                  v-model="searchCompanyForm.corporateName" @keydown.enter="loadCompany"></el-input>
      </el-form-item>
      <el-form-item label="公司级别" style="float: left">
        <el-input placeholder="输入公司级别" style="width:220px;"
                  v-model="searchCompanyForm.corporateLevel" @keydown.enter="loadCompany"></el-input>
      </el-form-item>
      <el-form-item label="行业分类" style="float: left">
        <el-input placeholder="输入行业分类" style="width:220px;"
                  v-model="searchCompanyForm.industryClassification" @keydown.enter="loadCompany"></el-input>
      </el-form-item>
      <el-form-item style="float: left;">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadCompany" color="#5B63B7">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 公司信息表格 -->
  <el-card style="margin:20px;">
    <el-table :data="CompanyArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="corporateName" label="公司名称" align="center"/>
      <el-table-column prop="corporateLevel" label="公司级别" align="center"/>
<!--      <el-table-column prop="coverPhoto" label="封面图片" align="center"/>-->
      <el-table-column prop="companySize" label="公司规模" align="center"/>
      <el-table-column prop="industryClassification" label="行业分类" align="center"/>
<!--      <el-table-column prop="photoShow" label="图片展示" align="center"/>-->
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column prop="status" label="公司状态" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="saveHr(scope.row.id)" :disabled="scope.row.status == '注销'" style="color:#5B63B7">新建员工</el-button>
          <el-button link type="primary" size="small" @click="editCompany(scope.row.id)" :disabled="scope.row.status == '注销'" style="color:#5B63B7">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteCompany(scope.row.id)" v-if="scope.row.status != '注销'" style="color:#5B63B7">注销</el-button>
          <el-button link type="primary" size="small" @click="UseCompany(scope.row.id)" v-else-if="scope.row.status == '注销'" style="color:#5B63B7">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const levelOption = ref([
  {label: '求职者',value: '10'},
  {label: '招聘者',value: '20'},
])

//控制新增用户弹窗是否显示
const dialogVisibleHr = ref(false);
//定义变量控制dialog的标题
const dialogTitleHr = ref('新建招聘者');
//准备对象用来收集新增/修改员工的表单信息
const saveHrForm = ref({
  nickname:'',
  password:'',
  email: '',
  phone:'',
  realName:'',
  gender: '男',
  status:'',
  identityId:'',
  wechatId:'',
  userImg:'',

  hrId:'',
  companyId:'',
  username:'',
  corporateName:'',
  avgResponseTimeHours:'',
  recentReplyCount: '',
  position:'',
  examineState:'',
  recommend:'1',
  userId:'',
  createTime:'',
  updateTime:''
});
//控制新增用户弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新建公司');
//准备对象用来收集新增/修改员工的表单信息
const saveCompanyForm = ref({
  id:'',
  corporateName:'',
  corporateLevel:'',
  coverPhoto: '',
  companySize:'',
  industryClassification:'',
  companyAddress:'',
  companyProfile:'',
  photoShow: '',
  createTime:'',
  updateTime:''
});

//新增Hr
const saveHr = (id) => {
  dialogTitleHr.value = '新增员工';
  dialogVisibleHr.value = true;
  axios.get(BASE_URL+'/v1/company/select?id='+id).then((response) => {
    if (response.data.code === 2000) {
      saveHrForm.value.corporateName = response.data.data[0].corporateName;
      saveHrForm.value.companyId = response.data.data[0].id;
    } else {
      console.log(saveHrForm.value);
      ElMessage.error(response.data.msg);
    }

    if (saveHrForm.value.position !== null && saveHrForm.value.position !== "")  {
      let data = JSON.stringify(saveHrForm.value);
      console.log(data);
      axios.post(BASE_URL + '/v1/hr/save/' + id, data, {
        headers: {
          'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
        }
      }).then((response) => {
        if (response.data.code === 2000) {
          ElMessage.success('添加成功!');
          dialogVisibleHr.value = false;
          saveHrForm.value = {};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
        }
      })
    }

  })
}
//实现取消按钮的功能
const handleCloseHr = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisibleHr.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveHrForm.value={};
  }
}
 // 新增公司
const saveCompany = () => {
  let data = JSON.stringify(saveCompanyForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/company/save',data, {
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      dialogVisible.value = false;//关闭弹窗
      saveCompanyForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadCompany();//加载用户列表方法
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//实现取消按钮的功能
const handleClose = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisible.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveCompanyForm.value={};
  }
}

//定义数组用来装用户列表信息
const CompanyArr = ref([]);
//定义对象保存查询条件
const searchCompanyForm = ref({corporateName: '', corporateLevel: '',industryClassification:''});
const loadCompany = () => {
  //如果传入了查询条件，则根据条件查询，没有条件，默认查询所有员工信息
  let data = qs.stringify(searchCompanyForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/company/select?'+data).then((response) => {
    if (response.data.code === 2000) {
      CompanyArr.value = response.data.data;
      console.log(CompanyArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//页面一加载立即调用
onMounted(() => {
  searchCompanyForm.value={};
  loadCompany();//加载员工列表
})

//重置用户搜索信息
const resetSearch = ()=>{
  searchCompanyForm.value={};
  loadCompany();
}


//编辑员工
const editCompany = (id) =>{
  console.log(id);
  //修改弹窗标题并打开弹窗
  dialogTitle.value = '编辑公司信息';
  dialogVisible.value = true;
  //根据id查询要修改的当前员工的信息
  axios.get(BASE_URL+'/v1/company/select?id='+id).then((response) => {
    if (response.data.code === 2000) {
      saveCompanyForm.value = response.data.data[0];
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//注销
const deleteCompany = (id)=>{
  console.log(id);
  // if(confirm('您确认要注销此企业吗?')){
    axios.post(BASE_URL+'/v1/company/delete/'+id).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('注销成功!');
        loadCompany();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  // }
}

const UseCompany = (id)=>{
  console.log(id);
  // if(confirm('您确认要启用此公司吗?')){
    axios.post(BASE_URL+'/v1/company/use/'+id).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('启用成功!');
        loadCompany();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  // }
}
</script>

<style scoped>
.custom-hover-color:hover {
  color: #5B63B7; /* 悬停时的文本颜色 */
  background-color: #f5f5f5;
  border-color: #cccccc;
}
/*出生日期*/
.demo-datetime-picker {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
</style>